<template>
  <div class="preview-img">
    <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in imgList"
          :key="index"
          :style="{backgroundImage: 'url(' + 'http://192.168.1.135:8060' + item.url + ')'}"></div>
      </div>
      <!-- 白色箭头 -->
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in imgList"
          :key="index"
          :style="{backgroundImage: 'url(' + 'http://192.168.1.135:8060' + item.url + ')'}">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'PreviewImg',
  components: {
  },
  data () {
    return {
      imgList: []
    }
  },
  created () {
    console.log(JSON.parse(this.$route.query.file))
    this.imgList = JSON.parse(this.$route.query.file)
  },
  mounted () {
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      loop: true,
      loopedSlides: 5,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 6,
      touchRatio: 0.2,
      loop: true,
      loopedSlides: 5,
      slideToClickedSlide: true
    })
    galleryTop.controller.control = galleryThumbs
    galleryThumbs.controller.control = galleryTop
  },
  methods: {}
}
</script>

<style scoped lang="less">
.preview-img {
  width: 100%;
  height: 100%;
  background: #FFF;
  padding: 0 200px;
  .gallery-top {
    height: 80%;
    width: 100%;
  }
  .gallery-thumbs {
    height: 20%;
    width: 100%;
    box-sizing: border-box;
    background: #EEE;
    padding: 10px;
    .swiper-slide {
      height: 100%;
      opacity: 0.4;
      border: 1px solid #000;
    }
    .swiper-slide-active {
      opacity: 1;
    }
  }
  .swiper-slide {
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0F0;
    font-size: 20px;
    word-break: break-all;
    padding: 0 10px;
  }
  .swiper-wrapper {
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
  }
}
</style>
